<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    :cancelText="$t('取消')"
    :okText="$t('保存')"
  >
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item class="customheight" :label="$t('手机号')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
            <span>{{model.phone}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="customheight" :label="$t('卡号')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chipNo">
            <span>{{model.chipNo}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="customheight" :label="$t('姓名')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
            <span>{{model.name}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item
            :label="$t('新密码')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="password"
          >
            <a-input type="password" v-model="model.password" :placeholder="$t('请输入6位数字消费密码')"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item
            :label="$t('确认密码')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="newpassword"
          >
            <a-input type="password" v-model="model.newpassword" :placeholder="$t('请再次输入6位数字消费密码')"></a-input>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </j-modal>
</template>
<script>
import { httpAction } from '@/api/manage'
export default {
  name: 'ResetPasswordModal',
  data() {
    return {
      title: this.$t('重置消费密码'),
      width: 600,
      visible: false,
      disableSubmit: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      model: {},
      validatorRules: {
        password: [{ required: true, message: this.$t('请输入6位数字消费密码') }, { validator: this.passwordValidator }],
        newpassword: [{ required: true, message: this.$t('请再次输入6位数字消费密码') }, { validator: this.npasswordValidator }]
      },
      url: {
        edit: '/member/bisMemberInfo/updatePassword'
      }
    }
  },
  methods: {
    edit(record) {
      let that = this
      that.visible = true
      that.confirmLoading = false
      that.model = Object.assign({}, record)
      if (that.model.memberCards != null && that.model.memberCards) {
        that.model.chipNo = that.model.memberCards
          .map(mat => {
            return mat.chipNo
          })
          .join(',')
      }
    },
    passwordValidator(rule, value, callback) {
      const pwdReg = /^[0-9]{6}$/
      if (!pwdReg.test(value)) {
        callback(this.$t('请输入6位数字消费密码'))
      }
      callback()
    },
    npasswordValidator(rule, value, callback) {
      if (value != this.model.password) {
        callback(this.$t('两次输入密码不一致'))
      }
      callback()
    },
    handleOk() {
      const that = this
      // 触发表单验证
      that.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = that.url.edit
          let method = 'put'
          let query = {
            memberId: that.model.id,
            password: that.model.password,
            confirmPassword: that.model.newpassword
          }
          httpAction(httpurl, query, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.close()
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style>
.customheight .ant-form-item-label,.customheight .ant-form-item-control{
  line-height: 1.4;
}
</style>